$(function () {
  // 电梯导航
  var flag = true; // 节流阀 太关键了， 防止动画冲突。
  $(window).scroll(function () {
    if ($(document).scrollTop() >= $(".recom").offset().top) {
      $(".fixedtool").fadeIn();
    } else {
      $(".fixedtool").fadeOut();
    }
    // 页面的滚动，电梯也要对应
    if (flag) {
      // 当页面出现点击事件时，根据页面变动的动画要停止。
      $(".floor>div").each(function (idx, ele) {
        if ($(document).scrollTop() >= $(ele).offset().top) {
          $(".fixedtool")
            .find("li")
            .eq(idx)
            .addClass("current")
            .siblings("li")
            .removeClass("current");
        }
      });
    }
  });
  // 电梯的点击，页面要有滚动
  $(".fixedtool")
    .find("li")
    .mouseover(function () {
      $(this).addClass("current").siblings("li").removeClass("current");
    });
  $(".fixedtool")
    .find("li")
    .click(function () {
      flag = false; // 点击时，关闭阀
      var idx = $(this).index();
      var top = $(".floor>div").eq(idx).offset().top;
      $("body, html")
        .stop()
        .animate(
          {
            scrollTop: top,
          },
          function () {
            flag = true;
          } // 点击动画完毕，打开阀
        );
    });

  var boxTop = $(".recom").offset().top;
  $(window).scroll(function () {
    if ($(document).scrollTop() >= boxTop) {
      $(".back").fadeIn();
    } else {
      $(".back").fadeOut();
    }
  });
  $(".back").click(function () {
    $("body, html").stop().animate({
      scrollTop: 0,
    });
  });
  $(".back").hover(function () {});
  // 轮播图
  var arrow_l = document.querySelector(".arrow-l");
  var arrow_r = document.querySelector(".arrow-r");
  var focus = document.querySelector(".focus");
  focus.addEventListener("mouseenter", () => {
    arrow_l.style.display = "block";
    arrow_r.style.display = "block";
    clearInterval(timer);
    timer = null;
  });
  focus.addEventListener("mouseleave", () => {
    arrow_l.style.display = "none";
    arrow_r.style.display = "none";
    timer = setInterval(() => {
      arrow_r.click();
    }, 2000);
  });
  var ul = focus.querySelector("ul");
  var ol = focus.querySelector(".circle");
  for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement("li");
    li.setAttribute("index", i);
    ol.appendChild(li);
    li.addEventListener("click", function () {
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = "";
      }
      this.className = "current";
      var focusWidth = focus.offsetWidth;
      var index = this.getAttribute("index");
      num = index;
      circle = index;
      animate(ul, -index * focusWidth);
    });
  }
  ol.children[0].className = "current";

  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);
  var num = 0;
  var circle = 0;
  var flag = true;
  arrow_r.addEventListener("click", function () {
    if (flag) {
      flag = false;
      if (num == ul.children.length - 1) {
        ul.style.left = 0;
        num = 0;
      }
      num++;
      animate(ul, -num * focus.offsetWidth, () => {
        flag = true;
      });
      circle++;
      if (circle === ol.children.length) {
        circle = 0;
      }
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = "";
      }
      ol.children[circle].className = "current";
    }
  });

  arrow_l.addEventListener("click", function () {
    if (flag) {
      flag = false;
      if (num == 0) {
        num = ul.children.length - 1;
        ul.style.left = -num * focus.offsetWidth + "px";
      }
      num--;
      animate(ul, -num * focus.offsetWidth, () => {
        flag = true;
      });
      circle--;
      circle = circle < 0 ? ol.children.length - 1 : circle;
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = "";
      }
      ol.children[circle].className = "current";
    }
  });

  var timer = setInterval(() => {
    arrow_r.click();
  }, 2000);

  if (localStorage.getItem("users") == null) {
    users = [
      {
        username: "System",
        phone: "10112345678",
        password: "system",
        remember: false,
      },
    ];
    localStorage.setItem("users", JSON.stringify(users));
  }
});
